<template>
    <div class="saleCategory">
        <div class="Header">
            <HeaderTitle></HeaderTitle>
        </div>
        <div class="bgc">
            <!-- 顶部背景图  -->
            <div class="top">
                <van-image class="banner"
                    src="https://yanxuan.nosdn.127.net/1ad57bd063541c9943a54813261f7e3f.png?type=webp&imageView&quality=75&thumbnail=750x0" />
                <!-- 提示轮播 -->
                <van-notice-bar class="notice" :scrollable="false">
                    <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                        <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
                        <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
                        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
                    </van-swipe>
                </van-notice-bar>
            </div>
            <!-- 中间粘性导航 -->
            <van-tabs v-model:active="active" sticky swipeable color="#dd1a21" :border="false">
                <van-tab v-for="index in 10" :title="'选项 ' + index">

                </van-tab>
            </van-tabs>
            <van-icon name="arrow-left" />
            <!-- 商品卡片 -->
            <div class="content">
                <div class="content-buy">
                    <div class="content-card">
                        <!-- 右侧商品图 -->
                        <div class="card-middle">
                            <img src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                                alt="">
                            <div class="title">
                                <img class="card-img" src="https://yanxuan.nosdn.127.net/static-union/167141847118dd3c.png"
                                    alt="">
                                <div class="title-text">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能互动新体验，春风元系列旋转伸缩飞机杯</div>
                            </div>
                            <!-- 卡片右侧中间位置 -->
                            <div class="middle-card">
                                <div class="card-tags">
                                    <img src="https://yanxuan.nosdn.127.net/7808f091e547371eeffc3be0364e593b.png" alt="">
                                    <div class="card-tags-text">好评率98%</div>
                                </div>
                                <div class="card-sale">
                                    <div>可用红包</div>
                                </div>
                            </div>
                            <!-- 卡片右侧底部位置 -->
                            <div class="card-bottom">
                                <div class="priceWrap">
                                    <span class="price">￥688</span>
                                    <span class="price-sale">￥688</span>
                                    <div class="saleCart">
                                        <span class="saleCartFast">马上抢</span>
                                        <van-icon name="arrow" class="icon-buy" />
                                    </div>
                                </div>
                            </div>

                        </div>
                        <van-notice-bar class="bottomNotice" :scrollable="false">
                            <img class="userImg"
                                src="	https://yanxuan.nosdn.127.net/3a24ee575520a65c19b7…pg?quality=75&type=webp&imageView&thumbnail=39x39">
                            <div class="userComment">很好很好；包装的很结实；大气美观的精品龙井礼盒</div>
                        </van-notice-bar>
                    </div>
                </div>
            </div>
            <!-- 商品卡片 -->
            <div class="content">
                <div class="content-buy">
                    <div class="content-card">
                        <!-- 右侧商品图 -->
                        <div class="card-middle">
                            <img src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                                alt="">
                            <div class="title">
                                <img class="card-img" src="https://yanxuan.nosdn.127.net/static-union/167141847118dd3c.png"
                                    alt="">
                                <div class="title-text">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能互动新体验，春风元系列旋转伸缩飞机杯</div>
                            </div>
                            <!-- 卡片右侧中间位置 -->
                            <div class="middle-card">
                                <div class="card-tags">
                                    <img src="https://yanxuan.nosdn.127.net/7808f091e547371eeffc3be0364e593b.png" alt="">
                                    <div class="card-tags-text">好评率98%</div>
                                </div>
                                <div class="card-sale">
                                    <div>可用红包</div>
                                </div>
                            </div>
                            <!-- 卡片右侧底部位置 -->
                            <div class="card-bottom">
                                <div class="priceWrap">
                                    <span class="price">￥688</span>
                                    <span class="price-sale">￥688</span>
                                    <div class="saleCart">
                                        <span class="saleCartFast">马上抢</span>
                                        <van-icon name="arrow" class="icon-buy" />
                                    </div>
                                </div>
                            </div>

                        </div>
                        <van-notice-bar class="bottomNotice" :scrollable="false">
                            <img class="userImg"
                                src="	https://yanxuan.nosdn.127.net/3a24ee575520a65c19b7…pg?quality=75&type=webp&imageView&thumbnail=39x39">
                            <div class="userComment">很好很好；包装的很结实；大气美观的精品龙井礼盒</div>
                        </van-notice-bar>
                    </div>
                </div>
            </div>
            <!-- 商品卡片 -->
            <div class="content">
                <div class="content-buy">
                    <div class="content-card">
                        <!-- 右侧商品图 -->
                        <div class="card-middle">
                            <img src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                                alt="">
                            <div class="title">
                                <img class="card-img" src="https://yanxuan.nosdn.127.net/static-union/167141847118dd3c.png"
                                    alt="">
                                <div class="title-text">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能互动新体验，春风元系列旋转伸缩飞机杯</div>
                            </div>
                            <!-- 卡片右侧中间位置 -->
                            <div class="middle-card">
                                <div class="card-tags">
                                    <img src="https://yanxuan.nosdn.127.net/7808f091e547371eeffc3be0364e593b.png" alt="">
                                    <div class="card-tags-text">好评率98%</div>
                                </div>
                                <div class="card-sale">
                                    <div>可用红包</div>
                                </div>
                            </div>
                            <!-- 卡片右侧底部位置 -->
                            <div class="card-bottom">
                                <div class="priceWrap">
                                    <span class="price">￥688</span>
                                    <span class="price-sale">￥688</span>
                                    <div class="saleCart">
                                        <span class="saleCartFast">马上抢</span>
                                        <van-icon name="arrow" class="icon-buy" />
                                    </div>
                                </div>
                            </div>

                        </div>
                        <van-notice-bar class="bottomNotice" :scrollable="false">
                            <img class="userImg"
                                src="	https://yanxuan.nosdn.127.net/3a24ee575520a65c19b7…pg?quality=75&type=webp&imageView&thumbnail=39x39">
                            <div class="userComment">很好很好；包装的很结实；大气美观的精品龙井礼盒</div>
                        </van-notice-bar>
                    </div>
                </div>
            </div>
            <!-- 商品卡片 -->
            <div class="content">
                <div class="content-buy">
                    <div class="content-card">
                        <!-- 右侧商品图 -->
                        <div class="card-middle">
                            <img src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                                alt="">
                            <div class="title">
                                <img class="card-img" src="https://yanxuan.nosdn.127.net/static-union/167141847118dd3c.png"
                                    alt="">
                                <div class="title-text">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能互动新体验，春风元系列旋转伸缩飞机杯</div>
                            </div>
                            <!-- 卡片右侧中间位置 -->
                            <div class="middle-card">
                                <div class="card-tags">
                                    <img src="https://yanxuan.nosdn.127.net/7808f091e547371eeffc3be0364e593b.png" alt="">
                                    <div class="card-tags-text">好评率98%</div>
                                </div>
                                <div class="card-sale">
                                    <div>可用红包</div>
                                </div>
                            </div>
                            <!-- 卡片右侧底部位置 -->
                            <div class="card-bottom">
                                <div class="priceWrap">
                                    <span class="price">￥688</span>
                                    <span class="price-sale">￥688</span>
                                    <div class="saleCart">
                                        <span class="saleCartFast">马上抢</span>
                                        <van-icon name="arrow" class="icon-buy" />
                                    </div>
                                </div>
                            </div>

                        </div>
                        <van-notice-bar class="bottomNotice" :scrollable="false">
                            <img class="userImg"
                                src="	https://yanxuan.nosdn.127.net/3a24ee575520a65c19b7…pg?quality=75&type=webp&imageView&thumbnail=39x39">
                            <div class="userComment">很好很好；包装的很结实；大气美观的精品龙井礼盒</div>
                        </van-notice-bar>
                    </div>
                </div>
            </div>
            <!-- 更多类商品 -->
            <van-button class="moreGoods" type="default">更多服饰鞋包类商品<van-icon class="moreButton" name="arrow" /></van-button>
            <!-- 更多榜单 -->
            <div class="moreCategories">
                <div class="moreHeader">更多榜单</div>
                <div class="moreList">
                    <div class="moreDetail">
                        <div class="moreContent">
                            <div class="moreContentTop">热销百强榜</div>
                            <div class="moreContentButton">进入榜单<van-icon class="ContentButton" name="arrow" /></div>
                        </div>
                        <img class="moreImg"
                            src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                            alt="">
                    </div>
                    <div class="moreDetail">
                        <div class="moreContent">
                            <div class="moreContentTop">热销百强榜</div>
                            <div class="moreContentButton">进入榜单<van-icon class="ContentButton" name="arrow" /></div>
                        </div>
                        <img class="moreImg"
                            src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                            alt="">
                    </div>
                    <div class="moreDetail">
                        <div class="moreContent">
                            <div class="moreContentTop">热销百强榜</div>
                            <div class="moreContentButton">进入榜单<van-icon class="ContentButton" name="arrow" /></div>
                        </div>
                        <img class="moreImg"
                            src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                            alt="">
                    </div>
                    <div class="moreDetail">
                        <div class="moreContent">
                            <div class="moreContentTop">热销百强榜</div>
                            <div class="moreContentButton">进入榜单<van-icon class="ContentButton" name="arrow" /></div>
                        </div>
                        <img class="moreImg"
                            src="https://yanxuan-item.nosdn.127.net/92a4dfd2cf750991cd4f8b084557ac52.png?quality=75&type=webp&imageView&thumbnail=240x240"
                            alt="">
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'SaleCategory',
})
</script>

<script lang="ts" setup>
import HeaderTitle from "@/components/HeaderTitle/index.vue"
import { ref } from 'vue';
const active = ref(1)
</script>

<style scoped lang="less">
.bgc {
    margin: 0;
    padding: 0;
    // border: 1px solid #dd1a21;
    background-color: #eee;
    position: relative;
    top: 50px;
}

/* 顶部背景图 */
.top {
    margin: 0 auto;
    width: 375px;
    // height: 5.28px;
    position: relative;
    text-align: center;
}

/* 提示消息轮播 */
.notice {
    z-index: 1;
    position: absolute;
    top: 106px;
    left: 100px;
    width: 136.5px;
    height: 20px;
    font-size: small;
    border-radius: 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, .1);
}

.notice-swipe {
    height: 18px;
    line-height: 26px;
    top: -5px;
    font-size: smaller;
}

// 中间的导航栏
.van-tabs {
    width: 343px;
    margin: 0 auto;
    position: relative;
    top: -120px;
    border-radius: 10px;

    div {
        border-radius: 10px;
    }
}

.van-tabs--line {}

:deep(.van-tabs__wrap) {
    border-radius: 10px;
}

.content {
    background-color: #eeeeee00;
    text-align: center;
    // position: relative;

}

.content-buy {
    margin-top: 7px;
    height: 100%;
    width: 343px;
    position: relative;
    top: -130px;
    margin: 7px auto 0;
}

.content-card {
    width: 100%;
    // border: 1px solid blue;
    height: 167px;
    border-radius: 10px;
    background-color: #fff;

    .card-middle {
        // border: 1px solid red;
        height: 120px;
        text-align: left;
        padding: 6px;
        display: block;
        position: relative;
        float: left;

        img {
            width: 120px;
            height: 120px;
        }

        .title {
            padding-left: 6px;
            // border: 1px solid orange;
            // display: block;
            float: right;
            width: 175px;
            position: relative;

            .card-img {
                position: absolute;
                // top: 7px;
                // left: 135px;
                // border: 1px solid blue;
                margin-top: 2px;
                width: 27px;
                height: 17px;
                float: left;

            }

            .title-text {
                // float: right;
                font-size: 14px;


            }
        }

        .middle-card {
            // border: 1px solid red;
            display: flex;
            position: absolute;
            left: 132px;
            top: 53px;

            .card-tags {
                background: linear-gradient(90.18deg, #eb2e21, #ffa77d);
                display: flex;
                border-radius: 10px;
                color: #fff;
                padding-right: 20px;

                img {
                    position: absolute;
                    top: 2px;
                    left: 1px;
                    width: 12px;
                    height: 12px;
                }

                .card-tags-text {
                    position: relative;
                    left: 15px;
                }
            }

            .card-sale {
                background-color: #fbe7e8;
                color: #dd1a21;
                border: 0;
                font-size: .2rem;
                padding: 0 8px;
                margin: 0 5px;
                border-radius: 10px;
            }

        }

        .card-bottom {
            // border: 1px solid red;
            width: 203px;
            height: 24px;
            line-height: 24px;
            position: absolute;
            top: 90px;
            left: 132px;

            .priceWrap {
                display: flex;

                .price {
                    // border: 1px solid green;
                    padding: 0 5px 0 0;
                    font-size: 16px;
                    font-family: PingFangSC-Medium;
                    color: #dd1a21;
                }

                .price-sale {
                    // border: 1px solid blue;
                    position: relative;
                    bottom: -3px;
                    color: #999;
                    text-decoration: line-through;
                }

                .saleCart {
                    // border: 1px solid peru;
                    position: absolute;
                    right: 6px;
                    background-image: linear-gradient(90deg, #f55, #ce2424);
                    border-radius: 12px;
                    width: 63px;
                    text-align: center;
                    color: #fff;
                    font-size: 15px;
                    font-family: PingFang SC;
                    font-weight: 700;
                }

            }
        }
    }

}

:deep(.bottomNotice) {
    width: 319px;
    height: 24px;
    line-height: 24px;
    color: #7f7f7f;
    padding: 0;
    margin: 3px auto;
    border-radius: 12px;
    display: flex;
    background-color: #f6f6f6;
}

:deep(.van-notice-bar__content) {
    display: flex;
    padding-left: 10px;
    font-size: 12px;
}

:deep(.userComment) {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

:deep(.userImg) {
    width: 18px;
    height: 18px;
    // border: 1px solid olive;
    background-image: url(https://yanxuan.nosdn.127.net/3a24ee575520a65c19b7…pg?quality=75&type=webp&imageView&thumbnail=39x39);
}

.moreGoods {
    width: 343px;
    position: relative;
    left: 15px;
    top: -123px;
    border-radius: 5px;
    font-size: 14px;
}

.moreCategories {
    position: relative;
    left: 15px;
    top: -116px;
    width: 343px;
    border-radius: 10px;
    // border: 1px solid orange;
    background-color: #fff;

    .moreHeader {
        width: 100%;
        height: 55px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 55px;
    }

    .moreList {
        margin: 0 4px;
        padding-bottom: 50px;
        display: flex;
        // justify-content: center;
        flex-wrap: wrap;
        align-content: space-between;



        .moreDetail {
            display: flex;
            background-color: #edf5fd;
            width: 161px;
            height: 80px;
            margin: 3px;
            border-radius: 5px;
            align-items: center;

            .moreContent {
                font-size: 14px;
                width: 81px;
                // border: 1px solid rebeccapurple;

                .moreContentButton {
                    margin-top: 3px;
                    font-size: 12px;
                }
            }

            .moreImg {
                max-width: 80px;
                height: auto;
                border-radius: 5px;
            }
        }
    }
}
</style>